<template>
  <div class="d-card">
    <div class="card-header" :style="[headerStyle]">{{ title }}</div>
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup name="DCard">
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  headerStyle: {
    type: Object,
    default: () => ({})
  },
})
</script>

<style lang="scss" scoped>
.d-card {
  width: 100%;
  height: 100%;
  .card-header {
    width: 100%;
    height: 30px;
    background-image: url('@/assets/images/park/d-card/title-bg@2x.png');
    background-size: 100% 100%;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    font-style: italic;
    color: #fefefe;
    text-indent: 48px;
    position: relative;
    line-height: 30px;
    &::before {
      content: '';
      display: block;
      position: absolute;
      right: 12px;
      bottom: -4px;
      width: 158px;
      height: 17px;
      background-image: url('@/assets/images/park/d-card/title-line@2x.png');
      background-size: 100% 100%;
    }
  }
  .card-content {
    width: 100%;
    height: calc(100% - 30px);
  }
}
</style>
